<template>
	<view :class="fixed?'content':''" :style="bottom?'margin-bottom:'+bottom + 'rpx':''">
		<view class="navbar" :style="color ? 'color:#FFFFFF;background:'+color : 'background:#FFFFFF;'"> 
			<!-- #ifndef H5 -->
			<view class="head-nav"></view>
			<!-- #endif -->
			<view class="box">
				<text @click="backTo" class="back iconfont icon-fanhui"></text>
				<text class="name">{{value}}</text>
				<text class="text-right" @click="gotos">{{textright}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			//导航标题
			value:{
				type:String,
				default:""
			},
			//顶部导航背景颜色
			color:{
				type:String,
				default:""
			},
			//判断是否需要定位
			fixed:{
				type:Boolean,
				default:false
			},
			//不定位的时候距离底部的距离
			bottom:{
				type:Number,
				default:0
			},
			//右侧是否显示数据
			textright:{
				type:String,
				default:''
			}
		},
		mounted() {
			// console.log('返回的数据'+this.value)
		},
		methods:{
			backTo(){
				uni.navigateBack({
					delta: 1
				});
			},
			//最右边跳转
			gotos(){
				this.$emit('goto')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 88rpx;
		z-index: 9999;
	}
	.navbar{
		height: 100%;
		min-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		line-height: 88rpx;
		border:2rpx solid rgba(0,0,0,.02) ;
		.box{
			position: relative;
			.back{
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 40rpx;
				font-weight: bold;
			}
		}

	}
	.text-right{
		position: absolute;
		right: 30rpx;
		font-weight: bold;
		font-size: 26rpx;
	}
	.head-nav{
		width: 100%;
		height: var(--status-bar-height);
	}
</style>
